<template>
  <div class="layout-parent w100 p10">
    <el-tabs type="border-card">
      <el-tab-pane>
        <template #label><vp-label zh="基本信息" en="Basic Info"/></template>
        <DeptRectification :id="businessId" :type="'valid'" ref="taskRef" @dataEmits="getData"></DeptRectification>
        <vp-card>
          <template #header>
            <vp-label zh="验证情况" en="Verification Status"/>
          </template>
          <el-form ref="processFormRef" label-suffix=":" :model="formData" :rules="processFormRules"  label-width="120px" class="w100">
          <el-row class="w100">
              <vp-col :span="1" >
                <el-form-item prop="yzqk" :rules="[validateUtils.notNull]">
                  <template #label><vp-label zh="验证情况" en="Verification Status"/></template>
                  <el-input
                        v-model="formData.yzqk"
                        maxlength="1300"
                        :autosize="{ minRows: 2}"
                        type="textarea"
                    />
                </el-form-item>
              </vp-col>
            </el-row>
          </el-form> 
        </vp-card>
        <el-form ref="processExtFormRef" label-suffix=":" :model="processExtFormData" :rules="formRules"  label-width="120px" class="w100">
              <vp-card v-if="isValid">
                <template #header>
                  <vp-label zh="隐患识别" en="Hazard Identification"/>
                </template>
                <el-row>
                  <vp-col :span="4" >
                      <el-form-item prop="sfnraqyx" label-width="140">
                        <template #label><vp-label zh="是否纳入安全隐患" en="Included in Hazards"/></template>
                          <el-radio-group v-model="processExtFormData.sfnraqyx" >
                              <el-radio :label="1">是 YES</el-radio>
                              <el-radio :label="0">否 NO</el-radio>
                          </el-radio-group>
                      </el-form-item>
                  </vp-col>
                  <vp-col :span="2" v-if="processExtFormData.sfnraqyx == 1" >
                      <el-form-item prop="yhjb" v-if="jb == 20" >
                        <template #label><vp-label zh="类别" en="Category"/></template>
                          <el-radio-group v-model="processExtFormData.yhjb" >
                              <el-radio :label="10">部门级 Department Level</el-radio>
                              <el-radio :label="20">公司级 Company Level</el-radio>
                          </el-radio-group>
                      </el-form-item>
                  </vp-col>
                </el-row>
                <el-row v-if="processExtFormData.sfnraqyx == 1">
                  <vp-col :span="4" >
                      <el-form-item prop="yhbh">
                        <template #label><vp-label zh="隐患编号" en="Hazard No."/></template>
                        <el-input maxlength="yhbh"
                          v-model.trim="processExtFormData.yhbh"
                          placeholder="不填写则自动生成"
                        />
                      </el-form-item>
                  </vp-col>
                  <vp-col :span="4"  v-if="jb == 10">
                    <el-form-item prop="yhclr" >
                      <template #label><vp-label zh="处理人" en="Handler"/></template>
                          <el-input
                            v-model="processExtFormData.yhclr"
                            @blur="processExtFormData.yhclr = $event.target.value.trim()"
                            maxlength="1300"
                            readonly
                          >
                          </el-input>
                    </el-form-item>
                  </vp-col>
                </el-row>
                <el-row v-if="processExtFormData.sfnraqyx == 1">
                  <vp-col :span="4" >
                    <el-form-item prop="zdbs" :rules="[validateUtils.notNull]">
                      <template #label><vp-label zh="重大安全隐患" en="Major Hazards"/></template>
                      <el-radio-group v-model="processExtFormData.zdbs"  >
                            <el-radio :label="1">是 YES</el-radio>
                            <el-radio :label="0">否 NO</el-radio>
                        </el-radio-group>
                    </el-form-item>
                  </vp-col>
                  <vp-col :span="4" >
                    <el-form-item prop="yhlb" :rules="[validateUtils.notNull]">
                      <template #label><vp-label zh="隐患类别" en="Hazard Cat."/></template>
                      <DictSelect 
                        :lxid='2009'
                        :selectedId="processExtFormData.yhlb"
                        @dictSelected='(data: any) => {processExtFormData.yhlb = data}'
                        class="w100"
                      />
                    </el-form-item>
                  </vp-col>
                </el-row>
                <el-row>
                  <vp-col :span="1" v-if="processExtFormData.sfnraqyx == 1">
                    <el-form-item prop="yhmc" :rules="[validateUtils.notNull]">
                      <template #label><vp-label zh="安全隐患名称" en="Hazard Name"/></template>
                      <el-input
                            v-model="processExtFormData.yhmc"
                            maxlength="1300"
                            :autosize="{ minRows: 2}"
                            type="textarea"
                        />
                    </el-form-item>
                  </vp-col>
                </el-row>
              </vp-card>
              <vp-card v-if="isValid">
                <template #header>
                  <vp-label zh="危险源识别" en="Hazard Source Identification"/>
                </template>
                <el-row>
                  <vp-col :span="4" >
                      <el-form-item prop="sfnrwxy" label-width="140">
                        <template #label><vp-label zh="是否纳入危险源" en="Included in Hazard"/></template>
                          <el-radio-group v-model="processExtFormData.sfnrwxy" >
                              <el-radio :label="1">是 YES</el-radio>
                              <el-radio :label="0">否 NO</el-radio>
                          </el-radio-group>
                      </el-form-item>
                  </vp-col>
                  <vp-col :span="2" v-if="processExtFormData.sfnrwxy == 1">
                      <el-form-item prop="wxyjb" v-if="jb == 20" >
                        <template #label><vp-label zh="类别" en="Category"/></template>
                          <el-radio-group v-model="processExtFormData.wxyjb" >
                              <el-radio :label="10">部门级 Department Level</el-radio>
                              <el-radio :label="20">公司级 Company Level</el-radio>
                          </el-radio-group>
                      </el-form-item>
                  </vp-col>
                </el-row>
                <el-row v-if="processExtFormData.sfnrwxy == 1">
                  <vp-col :span="4" >
                      <el-form-item prop="wxybh">
                        <template #label><vp-label zh="危险源编号" en="Hazard No."/></template>
                        <el-input maxlength="yhbh"
                          v-model.trim="processExtFormData.wxybh"
                          placeholder="不填写则自动生成"
                        />
                      </el-form-item>
                  </vp-col>
                  <vp-col :span="4"  v-if="jb == 10">
                    <el-form-item prop="wxyclr" >
                      <template #label><vp-label zh="处理人" en="Handler"/></template>
                          <el-input
                            v-model="processExtFormData.wxyclr"
                            @blur="processExtFormData.wxyclr = $event.target.value.trim()"
                            maxlength="1300"
                            readonly
                          >
                          </el-input>
                    </el-form-item>
                  </vp-col>
                </el-row>
                <el-row>
                  <vp-col :span="1" v-if="processExtFormData.sfnrwxy == 1">
                    <el-form-item prop="wxymc" :rules="[validateUtils.notNull]" >
                      <template #label><vp-label zh="危险源名称" en="Hazard Name"/></template>
                      <el-input
                            v-model="processExtFormData.wxymc"
                            maxlength="1300"
                            :autosize="{ minRows: 2}"
                            type="textarea"
                        />
                    </el-form-item>
                  </vp-col>
                </el-row>
              </vp-card>
          </el-form> 
      </el-tab-pane>
      <el-tab-pane>
        <template #label><vp-label zh="流程记录" en="Process Record"/></template>
        <ProcessHistory :processInsId="processInsId" />
      </el-tab-pane>
      <el-tab-pane>
        <template #label><vp-label zh="流程图" en="Process Chart"/></template>
        <ProcessView :processInsId="processInsId" />
      </el-tab-pane>
    </el-tabs>
    <StatusBar
      :id="formData.id"
      :status="formData.zt"
      :isValid="formData.yxbs"
    />
    <PageBottom>
      <VpProcessToolBar 
        :process-ins-id="processInsId" 
        :task-id="taskId" 
        :loading="submitLoading" 
        :before-show-fn="beforeShowFn"
        :after-agree-fn="afterAgreeFn"
        :set-loading-fn="(_loading: boolean) => { submitLoading = _loading }"
      />
    </PageBottom>
  </div>
</template>
<script lang="ts">
import {
  defineComponent,
  getCurrentInstance,
  onMounted,
  reactive,
  ref,
  toRefs,
} from "vue";
import request from "/@/utils/request";
import ProcessHistory from '/@/components/vp/workflow/ProcessHistory.vue';
import ProcessView from '/@/components/vp/workflow/ProcessView.vue';
import ProcessHandle from "/@/components/vp/workflow/VpProcessHandle.vue";
import { useRoute } from "vue-router";
import { ElMessage } from "element-plus";
import DeptRectification from "./DeptRectification.vue";
import validateUtils from "/@/utils/validateUtils";
import FileListCard from '/@/components/vp/file/VpFileListCard.vue';
import DictSelect from '/@/components/vp/dict/VpDictSelect.vue';
import PageBottom from '/@/components/vp/PageBottom/index.vue';
import mittBus from '/@/utils/mitt';
import { useUserInfo } from '/@/stores/userInfo';
import StatusBar from '/@/components/vp/status/StatusBar.vue';
import VpProcessToolBar from '/@/components/vp/workflow/VpProcessToolBar.vue';

export default defineComponent({
  name: "auditDeptRectification4Verify",
  props: {
    businessId: String,
    taskId: String,
    processInsId: String,
  },
  components: { ProcessHistory, ProcessView, ProcessHandle, DeptRectification, PageBottom, validateUtils, FileListCard,DictSelect, StatusBar, VpProcessToolBar },
  setup(props) {
    const state = reactive({
      loading: false,
      submitLoading: false,
      type: "audit",
      formData: {
        id: "",
        zt: 10,
        yxbs: 1,
        jb: null,
        yzqk: "",
        processHandle: {},
      },
      jb: 10,
      processExtFormData: {
        yzqk: '',
        sfnrwxy: null,
        yhjb: null,
        wxybh: "",
        wxyclr: "",
        wxyclrid: "",
        wxymc: "",
        sfnraqyx: null,
        wxyjb: null,
        yhbh: "",
        yhclr: "",
        yhclrid: "",
        yhmc: "",
        zdbs: null,
        yhlb:"",
      },
      processFormRules : {
        yzqk: [validateUtils.notNull],
      },
      formRules: {
        wxyclr: [{
              message: '必填/Required.',
              validator: (rule: any, value: any, callback: any)=>{
                  if (state.processExtFormData.sfnrwxy == 1 && state.jb == 10 && !state.processExtFormData.wxyclr) {
                      callback(new Error());
                  } else {
                      callback();
                  }
              },
        }],
        wxymc: [{
              message: '必填/Required.',
              validator: (rule: any, value: any, callback: any)=>{
                  if (state.processExtFormData.sfnrwxy == 1 && !state.processExtFormData.wxymc) {
                      callback(new Error());
                  } else {
                      callback();
                  }
              },
        }],
        yhclr: [{
              message: '必填/Required.',
              validator: (rule: any, value: any, callback: any)=>{
                  if (state.processExtFormData.sfnraqyx == 1 && state.jb == 10 && !state.processExtFormData.yhclr) {
                      callback(new Error());
                  } else {
                      callback();
                  }
              },
        }],
        yhmc: [{
              message: '必填/Required.',
              validator: (rule: any, value: any, callback: any)=>{
                  if (state.processExtFormData.sfnraqyx == 1 && !state.processExtFormData.yhmc) {
                      callback(new Error());
                  } else {
                      callback();
                  }
              },
        }],
      },
    });

    const loadWorkflow = () => {};
    onMounted(() => {
      loadWorkflow();
    });
    const route = useRoute();
    const processHandleRef = ref();
    const taskRef = ref();

    const processFormRef = ref();
    const processExtFormRef = ref();
    const isValid = ref(true);
    /**
     * 流程操作变动事件
     */
    const handleOperateChanged = (operate: boolean)=>{
        isValid.value = operate;
    }

    const getData = (data: any) => {
      state.formData = data;
      state.formData.yzqk = "";
      state.processExtFormData.wxyjb = data.jb;
      state.processExtFormData.yhjb = data.jb;
      state.jb = data.jb;
      const user = useUserInfo().userInfos.user;
      state.processExtFormData.wxyclr = user.realname;
      state.processExtFormData.yhclr = user.realname;
      state.processExtFormData.yhmc = data.wtms;
    };

    //同意前操作
    const beforeShowFn = () => {
      state.submitLoading = true;
      const promise1 = isValid.value ? processExtFormRef.value.validate() : null;
      const promise2 = processFormRef.value.validate();
      const promise3 = new Promise((resolve, reject) => { 
          if(state.processExtFormData.sfnrwxy != 1 && state.processExtFormData.sfnraqyx != 1){
              ElMessage.error("纳入隐患识别或危险源至少选择一项！");
              reject();
          }
          resolve(true);
      })
      return Promise.all([promise1, promise2, promise3]).finally(()=>{state.submitLoading = false;});
    }

    //同意后操作
    const afterAgreeFn = (processHandle: any) => { 
      state.submitLoading = true;
      let dangerousSrc = {};
      if(state.processExtFormData.sfnrwxy == 1){
        dangerousSrc = {
          jb: state.processExtFormData.wxyjb,
          bh: state.processExtFormData.wxybh,
          mc: state.processExtFormData.wxymc,
        }
      }
      let hiddenTrouble = {};
      if(state.processExtFormData.sfnraqyx) {
          hiddenTrouble = {
            jb: state.processExtFormData.yhjb,
            bh: state.processExtFormData.yhbh,
            mc: state.processExtFormData.yhmc,
            zdbs: state.processExtFormData.zdbs,
            yhlb: state.processExtFormData.yhlb,
          }
      }
      request.post("/safe/deptRectification/valid", {
        ...state.formData,
        dangerousSrc: dangerousSrc,
        hiddenTrouble: hiddenTrouble,
        processHandle: {
            processInsId: props.processInsId,
            taskId: props.taskId,
            ...processHandle,
        }
      }).then(()=>{
          mittBus.emit('onCurrentContextmenuClick', Object.assign({}, { contextMenuClickId: 1, ...route }));
          ElMessage.success("办理完毕/Completed Processing");
      }).catch(()=>{
      }).finally(()=>{
          state.submitLoading = false;
      })
    }

    return {
      ...toRefs(state),
      ...toRefs(props),
      processHandleRef,
      taskRef,
      validateUtils,
      isValid,
      handleOperateChanged,
      getData,
      processExtFormRef,
      processFormRef,
      beforeShowFn,
      afterAgreeFn,
    };
  },
});
</script>